<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bootstrap超酷Tabs选项卡美化特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<style type="text/css">
		.demo{ background: #d57d7d;padding: 1.5em 0; }
		a:hover,a:focus{
		    outline: none;
		    text-decoration: none;
		}
		.tab .nav-tabs{
		    position: relative;
		    border-bottom: 0 none;
		}
		.tab .nav-tabs li{
		    text-align: center;
		}
		.tab .nav-tabs li a{
		    display: block;
		    height: 70px;
		    line-height: 65px;
		    background: linear-gradient(165deg, transparent 29%, #908a78 30%);
		    font-size: 15px;
		    font-weight: 600;
		    color: #fff;
		    text-transform: uppercase;
		    margin-right: 0;
		    border-radius: 0;
		    border: none;
		    position: relative;
		    transition: all 0.5s ease 0s;
		}
		.tab .nav-tabs li.active a,
		.tab .nav-tabs li a:hover{
		    background: linear-gradient(165deg, transparent 29%, #efe8d5 30%);
		    border: none;
		    color: #908a78;
		}
		.tab .nav-tabs li a:before{
		    content: "";
		    height: 70px;
		    line-height: 90px;
		    border-bottom: 70px solid rgba(0, 0, 0, 0.1);
		    border-right: 10px solid transparent;
		    position: absolute;
		    top: 0;
		    left: 100%;
		    z-index: 1;
		}
		.tab .nav-tabs li:last-child a:before{
		    border: none;
		}
		.tab .tab-content{
		    font-size: 14px;
		    color: #6f6c6c;
		    line-height: 26px;
		    background: #efe8d5;
		    padding: 20px;
		}
		.tab .tab-content h3{
		    font-size: 24px;
		    color: #6f6c6c;
		    margin-top: 0;
		}
		.tab .tab-content p{
		    margin-bottom: 0;
		}
		@media only screen and (max-width: 480px){
		    .tab .nav-tabs li{
		        width: 100%;
		        margin-bottom: 8px;
		    }
		    .tab .nav-tabs li:last-child{
		        margin-bottom: 0;
		    }
		    .tab .nav-tabs li a:before{
		        border: none;
		    }
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>Bootstrap超酷Tabs选项卡美化特效</h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/css3/ui-design/201702214363.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="demo">
		        <div class="container">
		            <div class="row">
		                <div class="col-md-offset-3 col-md-6">
		                    <div class="tab" role="tabpanel">
		                        <!-- Nav tabs -->
		                        <ul class="nav nav-tabs" role="tablist">
		                            <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li>
		                            <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
		                            <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
		                        </ul>
		                        <!-- Tab panes -->
		                        <div class="tab-content tabs">
		                            <div role="tabpanel" class="tab-pane fade in active" id="Section1">
		                                <h3>Section 1</h3>
		                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p>
		                            </div>
		                            <div role="tabpanel" class="tab-pane fade" id="Section2">
		                                <h3>Section 2</h3>
		                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p>
		                            </div>
		                            <div role="tabpanel" class="tab-pane fade" id="Section3">
		                                <h3>Section 3</h3>
		                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
	</div>
	
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>